//<script type='text/javascript'>

HtmlPanel = function( trg ) {
	
	Object.extend( panel = new Element( "div", { class:"html_panel" }), controls.htmlpanel );
	panel.insert( panel.expand = new Element( "span", { class:"expand" }));
	panel.seed();
	
	panel.trg = trg.observe( "mouseup", panel.trace.bind( panel ));

	return panel;
}

controls.htmlpanel	=	{
	
	tags		:{},
	
	setup		: {
		"normal"		: { command: "removeFormat", icopos: 7 },
		"bold"			: { command: "bold", node:"strong", icopos: 0 },
		"italic"		: { command: "italic", node:"em", icopos: 1 },
		"underline"		: { command: "underline", node:"u", icopos: 10 },
		"heading"		: { command: "formatblock", node:"h1", attr:"h1", icopos: 6 },
		"justifyleft"	: { command: "justifyleft", icopos: 11 },
		"justifycenter"	: { command: "justifycenter", icopos: 12 },
		"justifyright"	: { command: "justifyright", icopos: 13 },
		"list"			: { command: "insertUnorderedList", node:"ul", icopos: 2 },
		"link"			: { command: "createLink", node:"a", icopos: 3, expand: "constructLink" },
		"image"			: { command: "insertImage", node:"img", icopos: 4, expand: "constructImage" },
		"undo"			: { command: "undo", node:"normal", icopos: 8 },
		"redo"			: { command: "redo", node:"normal", icopos: 9 }/*,
		"style"		: { command: "styleWithCSS", node:"span", icopos: 5, expand: "constructStyle" }*/
	},
	
	seed		: function() {
		
		this.expand.hide();
		$H( this.setup ).each( this.addcontrol, this );

	},
	
	addcontrol	: function( vars ) {
	
		this.insert( el = new Element( "button", { class: vars.key, value:vars.key }).setStyle({ backgroundPosition: ( -24 * vars.value.icopos ) + "px 0" }));
		el.observe( "click", this.exec.bind( this )).vars = vars.value;
		
		this.tags[ vars.value.node ] = vars.key;
	},
	
	exec		: function( e ) {
		bt = e.currentTarget;
		if( this.performExpand( bt )) return false;
		
		if( this.obj.collapsed && bt.vars.expand ) {
			this.obj.insertNode( ins = new Element( bt.vars.node, bt.vars.attr ));
			if( bt.vars.node != "img" ) {
				ins.update( bt.value );
			}	
		} else {
			document.execCommand( bt.vars.command, false, this.getValueArgument( bt ));
		}
		
		
		this._expand = null;
		this.expand.hide();
	},
	
	trace		: function() {

		this.selected = window.getSelection();
		
		// Range Object;
		this.obj = this.selected.getRangeAt(0);
		
	},
	
	traceContamination	: function( el ) {
		
		if( this.tags[ el.tagName.toLowerCase() ] )
			this.down( "." + this.tags[ el.tagName.toLowerCase() ] ).addClassName( "active" );
	},
	
	performExpand	: function( bt ) {

		window.getSelection().getRangeAt(0).setStart( this.obj.startContainer, this.obj.startOffset );
		window.getSelection().getRangeAt(0).setEnd( this.obj.endContainer, this.obj.endOffset );

		if( bt.vars.expand && this._expand != bt.vars.expand ) {
			
			content = this[ bt.vars.expand ]( bt.vars );
			
			this.expand.update( content ).show();
			this._expand = bt.vars.expand;
			
			return true;
			
		} else if( bt.vars.expand ) {
						
			bt.vars.attr = this.getExpandValues();
			if( bt.vars.attr.href ) {
				bt.vars.command = 'insertHTML';
			}
		}
	},
	
	getExpandValues		: function() {
		
		vars = new Object();
		this.expand.select( "input" ).each( function( el ){ 
			if(( el.type == 'checkbox' && el.checked == true ) || el.type != 'checkbox' ) {
				if( el.name ) vars[ el.name ] = el.value; 
			}
		});
				
		return vars;
	},
	
	getValueArgument	: function( bt ) {
		
		if( bt.vars.attr ) {
			if( bt.vars.attr.href ) {
				var href = bt.vars.attr.href;
				if( bt.vars.attr.target ) {
					href = '<a href="' + href + '" target="_blank">' + window.getSelection() + '</a>';
				} else {
					href = '<a href="' + href + '">' + window.getSelection() + '</a>';
				}
				return href;
			} else if( bt.vars.attr.src ){
				return bt.vars.attr.src; 
			} else {
				return bt.vars.attr; 
			}
		} else { 
			return null;
		}
	}
}

controls.htmlpanel.constructLink = function( vars ) {
	
	group = new Element( "span" );
	group.insert( new Element( "input", { type:"field", name:"href", value:"http://" }).setStyle({ width: '160px' }));
	group.insert( new Element( "input", { type:"checkbox", name:"target", value:"_blank" }).setStyle({ width: 'auto', height: 'auto', margin: '3px 2px 0 3px' }));
	group.insert( new Element( "span", { class: 'label' }).setStyle({ width: 'auto', height: 'auto', margin: '3px 2px 0', color: 'white' }).update( 'new window' ));
	group.insert( bt = new Element( "input", { type:"button", value:"use link" }).setStyle({ width: '110px' }));
	
	bt.observe( "click", this.exec.bind( this )).vars = vars;

	return group;

}

controls.htmlpanel.constructImage = function( vars ) {
	
	group = new Element( "span" );
	group.insert( new Element( "input", { type:"field", name:"src", value:"link path..." }));
	group.insert( bt = new Element( "input", { type:"button", value:"use image" }));
	
	bt.observe( "click", this.exec.bind( this )).vars = vars;

	return group;

}

controls.htmlpanel.constructStyle = function( vars ) {
	
	return new Element( "span" ).update( "Stijlmanipulatie inactief." );

}